<template>
    <div class="login-modal">
        <div class="header">
            <div class="close" @click="onClose"></div>
            <p>用户登录</p>
        </div>
        <form class="form" @submit="onSubmit">
            <div class="form-input">
                <input type="text" v-model="token" placeholder="请输入 accessToken">
            </div>
            <button class="submit">登录</button>
        </form>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Component
    } from 'vue-property-decorator';

    import {
        Action
    } from 'vuex-class';

    import * as types from './../../state/types/user'

    @Component({
        name: `User`
    })
    export default class Login extends Vue {
        token: string = ``;
        @Action(types.onLogin) onLogin!:Function;

        mounted(){

        }

        async onSubmit(event: Event) {
            event.preventDefault();
            if (!this.token.trim()) {
                return (
                    this.$alert({
                        title: `提示`,
                        message: `请输入access token!`
                    })
                )
            }
            this.$loading.show();
            try {
                await this.onLogin(this.token);
                this.$Login.close();
            }
            catch (e) {
                this.$alert({
                    title:`提示`,
                    message:e.message
                })
            }
            this.$loading.close()
        }

        onClose() {
            this.$confirm({
                title: `退出提示`,
                message: `确定要退出?`,
                onConfirm: this.$Login.close
            })
        }
    }
</script>

<style scoped lang="scss">
    @import "./../../common/var";

    .login-modal {
        width: 100%;
        height: 100vh;
        background-color: #fff;
    }

    .header {
        height: 60px;
        position: relative;
        border-bottom: 1px solid #ececec;
        display: flex;
        align-items: center;
        justify-content: center;
        p {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
    }

    .close {
        left: 0;
        height: 100%;
        width: 60px;
        color: $color;
        position: absolute;

        &:before, &:after {
            content: '';
            display: block;
            position: absolute;
            border-radius: 1.5px;
            background-color: currentColor;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
        }
        &:before {
            width: 45%;
            height: 3px;
            left: 50%;
            top: 50%;
        }
        &:after {
            width: 3px;
            height: 45%;
            left: 50%;
            top: 50%;
        }
        &:active {
            opacity: .6;
        }
    }

    .form {
        display: block;
        padding: 40px 20px;
    }

    .form-input {
        height: 48px;
        border: 1px solid #ececec;
        background-color: #ececec;
        padding: 0 10px;
        overflow: hidden;
        border-radius: 4px;
        input {
            display: block;
            width: 100%;
            height: 100%;
            color: #555;
            background-color: transparent;
            font-size: 16px;
            &::-webkit-input-placeholder {
                color: #999;
            }
        }
    }

    .submit {
        height: 48px;
        width: 100%;
        display: block;
        margin-top: 50px;
        font-size: 18px;
        color: #fff;
        border-radius: 4px;
        background: $linearColor;
        &:active {
            background: $color;
        }
    }
</style>